<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>主页</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/homepage.css"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css"/>
		<script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/js/homepage.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#userInfoImgDiv{
				background:url(../images/${userBean.imgUrl}) no-repeat center bottom;
				background-size: 80px 80px;  
			}
			#list_headImgDiv{
				background:url(../images/${userBean.imgUrl}) no-repeat center bottom;
				background-size: 40px 40px;
			}
		</style>
		<script type="text/javascript">
			var userid = ${userBean.id};
			var ws = null;
			if(WebSocket){
				ws  = new WebSocket("ws://localhost:8080/TTchat/haha/"+userid);
				console.log("连接成功");
			}else{
				alert("您的浏览器不支持WebSocket！");
			}
			ws.onopen = function(event){
			    console.log("连接成功");
			    console.log(event);
			};
			ws.onmessage =function(event){
				if(event.data == "好友申请"){
					acceptFriend();					
				}else if(event.data == "同意好友申请"){
					getFriendReqInfo();
				}else if(event.data == "删除好友"){
					selectFriendLst();
				}else if(event.data == "邀请进群"){
					requestGroupMessage();
				}else{
					var json = $.parseJSON(event.data);
					if(json.type == "单聊" ){
						chatMessageList(json);
					}else if(json.type == "同意邀请进群"){
						agreeReqGroup(json);
					}else if(json.type == "群聊"){
						chatGroupMessageList(json);
					}
				}
				
			}
			ws.error = function(event){
				console.log("连接失败");
				console.log(event);
			}		
			$(function (){
				
				//修改用户名
				updateUsername();
				setProvinceAndCity();
				upLoadImg();
				searchFriend();
				acceptFriend();
				updateStatus();
				getFriendReqInfo();
				selectFriendLst();
				selectGroupList();
				requestGroupMessage();
				moveToFriendCircle();
				if('${showUserInfo}' == 1){
					$('#list_headImgDiv').click();
				}
			});
			
			/**
			 * 修改用户名
			 */
			function updateUsername(){
				$('#list_headNameDiv').blur(function () {
					var name = $(this).text();
					if(name == ""){
						alert("用户名不能为空");
						return false;
					}
					$.ajax({
						type:"post",
						url:"${pageContext.request.contextPath}/home/uu.action?email=${userBean.email}&username="+name,
						async:true,
						success:function (data) {
							if(data == 1){
								alert('修改成功');	
							}else{
								alert('修改失败');
							}
						}
					});
				});
			}
			/**
			 * 初始化省市
			 */
			function setProvinceAndCity(){
				var gid = "${userBean.gProvince}";
				if(gid == null || gid == ""){
					gid = $('#userInfoDiv #gProvince').val();
					if(gid == null || gid == ""){
						gid = 1;
					}
				}
				var sid = "${userBean.sProvince}";
				if(sid == null || sid == ""){
					sid = $('#userInfoDiv #sProvince').val();
					if(sid == null || sid == ""){
						sid = 1;
					}
				}
				
				$.ajax({
					type:"post",
					data:{gid:gid,sid:sid},
					//dataType:"json",
					url:"${pageContext.request.contextPath}/home/spa.action",
					async:true,
					success:function (data){
						initProvinceAndCity(data,"${userBean.gProvince}","${userBean.gCity}","${userBean.sProvince}","${userBean.sCity}");	
					}	
				});
			}
			
			/**
			 * 下拉列表切换省市
			 */
			function changeGCity(id){
				$.ajax({
					type:"post",
					data:{id:id},
					url:"${pageContext.request.contextPath}/home/cpac.action",
					async:true,
					success:changegCity	
				});
			}
			function changeSCity(id){
				$.ajax({
					type:"post",
					data:{id:id},
					url:"${pageContext.request.contextPath}/home/cpac.action",
					async:true,
					success:changesCity	
				});
			}
			/**
			 * 修改用户信息
			 */
			function updateUserInfoAjax(formData){
				$.ajax({
					type:"post",
					data:{id:'${userBean.id}'},
					url:"${pageContext.request.contextPath}/home/uui.action?"+formData,
					async:true,
					success:function(data){
						if(data == 1){
							alert('修改成功');	
						}else{
							alert('修改失败');
						}
					}
				});
			}
			/**
			 * 上传图片
			 */
			function upLoadImg(){
				$('#imgHead').change(function (){
					$('#uploadImgForm').submit();
				});
			}
			/**
			 * 搜索好友
			 */
			function searchFriend(){
				$('#searchFriendSubmit').click(function (){
					$.ajax({
						type:"post",
						data:$('#searchFriendForm').serialize(),
						url:'${pageContext.request.contextPath}/home/sf.action',
						success:function(data){
							$('#searchResultDiv>ul>li').remove();
							var json = $.parseJSON(data);
							if(json[0].username.length >5){
								var username = json[0].username.substr(0,5)+"..";
							}else{
								var username = json[0].username;
							}
							var li ='<li><div class="searchResultImgDiv" style="background:url(../images/'+json[0].imgUrl+') no-repeat center center;background-size: 71px 71px; title="查看"></div>'
								+'<div class="hide" style="display: none">'+json[0].id+'</div><div class="searchResultNameDiv" title="'+json[0].username+'">'+username+'</div><div class="searchResultAddButtonDiv" title="添加" onClick="addFriend(this)">+</div></li>';
							$('#searchResultDiv>ul').prepend(li);
						},
					});
				});
			}
			/**
			 * 发送好友申请
			 */
			function addFriend(a){
				var result=confirm("是否向该用户提出好友申请！");
				if (result==true){
					var id = $(a).parent().find('.hide').text();
					var jsonStr ='{"业务类型":"好友申请","id":'+id+'}';
					ws.send(jsonStr);
				}
			}
			/**
			 * 同意好友申请
			 */
			function agree(a){
				var id = $(a).parent().parent().find('.hide').text();
				var url = $(a).parent().parent().find('.list_bodyImgDiv').css('background-image');
				//var imgUrl = url.sunstr();
				var x=url.indexOf('/');
			    for(var i=0;i<3;i++){
			        x=url.indexOf('/',x+1);
			    }
				var imgUrl =".." + url.substring(x,url.length-2);
				var name = $(a).parent().parent().find('.list_bodyName').text();
				var index = name.indexOf("请求添加您为好友");
				var username = name.substr(0,index);
				var jsonStr ='{"业务类型":"同意好友申请","id":'+id+'}';
				ws.send(jsonStr);
				$.ajax({
					type:"post",
					data:{
						"fid":id,
						"uid":"${userBean.id}"
					},
					url:'${pageContext.request.contextPath}/home/aus.action'					
				});
				var li = '<li onClick="chatOneToOne(this,event);selectChatMessage(this)">'
						+'<div class="list_bodyImgDiv" title="查看" style="background:url('+imgUrl+') no-repeat center center;background-size: 40px 40px;"></div>'
						+'<div class="list_bodyName" onmousedown="clickFriendListToMenu(this,event);">'+username+'</div>'
						+'<div class="hide" style="display: none">'+id+'</div></li>';
				$('#list_bodyDiv2>ul>li:eq(1)>ul').prepend(li);
				$(a).parent().parent().remove();
			}
			/**
			 * 拒绝好友申请
			 */
			function refuse(a){
				var id = $(a).parent().parent().find('.hide').text();
				$.ajax({
					type:"post",
					data:{
						"fid":id,
						"uid":"${userBean.id}"
					},
					url:'${pageContext.request.contextPath}/home/rd.action'
				});
				$(a).parent().parent().remove();
			}
			/**
			 * 接受好友申请
			 */
			function acceptFriend(){
				var accrptReq = {
					type:"post",
					data:{'id':'${userBean.id}'},
					url:"${pageContext.request.contextPath}/home/ar.action",
					success:function(data){
						var json = $.parseJSON(data);
						if(data!=null && json.length != 0){
							for(var i=0;i<json.length;i++){
								var li = "<li><div class='list_bodyImgDiv' style='background:url(../images/"+json[i].imgUrl+") no-repeat center center;background-size: 40px 40px;' title='查看'></div>"
									+"<div class='list_bodyName'>"+json[i].username+"请求添加您为好友</div><div class='hide' style='display: none'>"+json[i].id+"</div>"
									+"<div class='list_bodyChoice'><div class='list_bodyChoiceA' onClick='agree(this)'>同意</div><div class='list_bodyChoiceB' onClick='refuse(this)'>拒绝</div></div>"
								$('#list_bodyDiv1>ul').prepend(li);
							}
							
						}
					}
				}
				$.ajax(accrptReq);
			} 
			/**
			 * 接受群邀请
			 */
			function requestGroupMessage(){
				$.ajax({
					type:"post",
					data:{
						"uid":"${userBean.id}"
					},
					url:'${pageContext.request.contextPath}/home/rgm.action',
					success:function(data){
						var json = $.parseJSON(data);
						for(var i=0;i<json.length;i++){
							var li = "<li>"
								+"<div class='grouplist_bodyName'>您的好友"+json[i].username+"邀请您进群'"+json[i].groupname+"'</div>"
								+"<div class='hide' style='display: none'>"+json[i].id+"</div>"
								+"<div class='hideID' style='display: none'>"+json[i].ID+"</div>"
								+"<div class='grouplist_bodyChoice'><div class='grouplist_bodyChoiceA' onClick='agreeGroup(this)'>同意</div><div class='grouplist_bodyChoiceB' onClick='refuseGroup(this)'>拒绝</div></div>"
							$('#list_bodyDiv1>ul').prepend(li);
						}
					}
				});
			}
			/**
			 * 接受同意群邀请的信息
			 */
			function agreeReqGroup(json){
				var msg = json.username+"加入群"+json.groupname+"!";
				alert(msg);
			}
			/**
			 * 同意群邀请
			 */
			function agreeGroup(a){
				//邀请人ID
				var id = $(a).parent().parent().find('.hide').text();
				//群ID
				var ID = $(a).parent().parent().find('.hideID').text();
				var name = $(a).parent().parent().find('.grouplist_bodyName').text();
				var index = name.indexOf("邀请您进群") + 6;
				var groupname = name.substring(index,(name.length-1));
				var jsonStr ='{"业务类型":"同意邀请进群","id":'+id+',"username":${userBean.username},"groupname":'+groupname+'}';
				ws.send(jsonStr);
				$.ajax({
					type:"post",
					data:{
						"id":ID,
						"uid":"${userBean.id}"
					},
					url:'${pageContext.request.contextPath}/home/ag.action'					
				});
				var li = "<li onClick='chatOneToAll(this,event)'><div class='list_bodyName'>"+groupname+"</div>"+
					"<div class='hide' style='display:none'>group"+ID+"</div></li>";
					$("#list_bodyDiv #list_bodyDiv3 ul").prepend(li);
				$(a).parent().parent().remove();
				var div = "<div class='chatBodyDiv' id='chatBodyDivgroup"+ID+"' style='display:none'></div>";
				$('#chatBodyDiv').prepend(div);
			}
			/**
			 * 拒绝群邀请
			 */
			function refuseGroup(a){
				var ID = $(a).parent().parent().find('.hideID').text();
				$.ajax({
					type:"post",
					data:{
						"id":ID,
						"uid":"${userBean.id}"
					},
					url:'${pageContext.request.contextPath}/home/rg.action'
				});
				$(a).parent().parent().remove();
			}
			/**
			 * 关闭页面后将好友申请的状态值改回1
			 */
			function updateStatus(){
				window.onbeforeunload = function updateS(){ 
					$.ajax({
						type:"post",
						data:{'id':'${userBean.id}'},
						url:"${pageContext.request.contextPath}/home/uus.action"
					});
				} 
				$(window).unload(function(){
					$.ajax({
						type:"post",
						data:{'id':'${userBean.id}'},
						url:"${pageContext.request.contextPath}/home/uus.action"
					});
				});
			}
			/**
			 * 得到发出的好友申请的返回消息
			 */
			function getFriendReqInfo(){
				var getReqInfo = {
						type:"post",
						data:{'id':'${userBean.id}'},
						url:"${pageContext.request.contextPath}/home/gfri.action",
						success:function(data){
							var json = $.parseJSON(data);
							if(data!=null && json.length != 0){
								for(var i=0;i<json.length;i++){
									alert(json[i].username+"已通过您的好友申请");
									var li = '<li onClick="chatOneToOne(this,event);selectChatMessage(this)" title="'+json[i].email+'"><div class="list_bodyImgDiv" title="查看" style="background:url(../images/'+json[i].imgUrl+')  no-repeat center center;background-size: 40px 40px;"></div>'
										+'<div class="list_bodyName" onmousedown="clickFriendListToMenu(this,event);">'+json[i].username+'</div><div class="hide" id="hide'+json[i].id+'" style="display: none">'+json[i].id+'</div></li>';
									$('#list_bodyDiv2>ul>li:eq(1)>ul').prepend(li);
								}
							}
						}
					}
					$.ajax(getReqInfo);
			}
			/**
			 * 查询全部好友
			 */
			function selectFriendLst(){
				$("#list_bodyDiv2>ul>li:eq(1)>ul").find('li').remove();
				$.ajax({
					type:"post",
					data:{'id':'${userBean.id}'},
					url:"${pageContext.request.contextPath}/home/sfl.action",
					success:function(data){
						var json = $.parseJSON(data);
						if(data!=null && json.length != 0){
							for(var i=0;i<json.length;i++){
								var li = '<li onClick="chatOneToOne(this,event);selectChatMessage(this)"><div class="list_bodyImgDiv" title="查看" style="background:url(../images/'+json[i].imgUrl+')  no-repeat center center;background-size: 40px 40px;"></div>'
									+'<div class="list_bodyName" onmousedown="clickFriendListToMenu(this,event);">'+json[i].username+'</div><div class="hide" id="hide'+json[i].id+'" style="display: none">'+json[i].id+'</div></li>';
								$('#list_bodyDiv2>ul>li:eq(1)>ul').prepend(li);
							}
						}
						//获取列表中的li数量
						var count = $('#list_bodyDiv2>ul>li:eq(1)>ul>li').length;
						//计算出列表的高度
						var height =count*60 +'px';
						$('#list_bodyDiv2>ul>li:eq(1)').css('height',height);
						
						selectChatMsgList();
					}
				});
			}
			/**
			 * 查询群组列表
			 */
			function selectGroupList(){
				$.ajax({
					type:"post",
					data:{'uid':'${userBean.id}'},
					url:"${pageContext.request.contextPath}/home/sgl.action",
					success:function(data){
						var json = $.parseJSON(data);
						for(var i=0;i<json.length;i++){
							var li = "<li onClick='chatOneToAll(this,event)'><div class='list_bodyName'>"+json[i].name+"</div>"+
								"<div class='hide' style='display:none'>group"+json[i].id+"</div></li>";
							$("#list_bodyDiv #list_bodyDiv3 ul").prepend(li);
							createGroupChatBodyDiv(json[i]);
						}
					}
				});
			}
			/**
			 * 删除好友
			 */
			function deleteFriend(a){
				var result=confirm("是否删除该好友！");
				if (result==true){
					var id = $(a).parent().find('.hide').text();
					$.ajax({
						type:"post",
						data:{'uid':'${userBean.id}','fid':id},
						url:"${pageContext.request.contextPath}/home/df.action",
						success:function(){
							selectFriendLst();
							var jsonStr ='{"业务类型":"删除好友","id":'+id+'}';
							ws.send(jsonStr);
						}
					});
					
				}
			}
			/**
			 * 邀请好友进群
			 */
			function requestGroupFriend(a){
				var id = $(a).parent().find('.hide').text();
				var groupId = $(a).prev().find('select').val();
				$.ajax({
					type:"post",
					data:{'uid':id,'id':groupId,'role':2},
					url:"${pageContext.request.contextPath}/home/rgf.action",
					success:function(){
						var jsonStr ='{"业务类型":"邀请进群","id":'+id+',"name":"${userBean.username}"}';
						ws.send(jsonStr);
					}
				});
			}
			/**
			 * 发送消息
			 */
			function sendMessage(id,msg){
				$.ajax({
					type:"post",
					data:{'uid':'${userBean.id}','fid':id,'msg':msg},
					url:"${pageContext.request.contextPath}/home/sm.action",
					success:function(){
						var jsonStr ='{"业务类型":"好友消息","fid":"${userBean.id}","uid":'+id+',"msg":'+msg+'}';
						ws.send(jsonStr);
					}
				});
			}
			/**
			 * 发送群消息
			 */
			function sendGroupMessage(id,msg,name){
				var jsonStr ='{"业务类型":"群组消息","name":"'+name+'","uid":${userBean.id},"id":'+id+',"msg":'+msg+'}';
				ws.send(jsonStr);
			}
			/**
			 * 查询未阅读的消息,并设置为已阅
			 */
			function selectChatMessage(a){
				var fid = null;
				if($(a).find('.hideID').length > 0){
					fid = $(a).find('.hideID').text();
				}else if($(a).find('.hide').length > 0){
					fid = $(a).find('.hide').text();
				}
				
				$.ajax({
					type:"post",
					data:{'uid':'${userBean.id}','fid':fid},
					url:"${pageContext.request.contextPath}/home/scm.action",
					success:function(data){
						var json = $.parseJSON(data);
						createChatMessageList(json,fid);
					}
				});
			}
			/**
			 * 将已阅读的消息设置为已阅
			 */
			function updateChatMessageStatus(fid){
				$.ajax({
					type:"post",
					data:{'uid':'${userBean.id}','fid':fid},
					url:"${pageContext.request.contextPath}/home/ucms.action",
				});
			}
			/**
			 * 查询最新的未阅读消息,生成消息提醒列表
			 */
			function selectChatMsgList(){
				$.ajax({
					type:"post",
					data:{'uid':'${userBean.id}'},
					url:"${pageContext.request.contextPath}/home/scml.action",
					success:function(data){
						var json = $.parseJSON(data);
						createChatMessageInfoList(json);
					}
				});
			}
			/**
			 * 创建群组
			 */
			function createGroup(a){
				var name = $(a).prev().val();
				if(name != ""){
					$.ajax({
						type:"post",
						data:{'uid':'${userBean.id}',"name":name,"role":1},
						url:"${pageContext.request.contextPath}/home/cg.action",
						success:function(data){
							alert("成功创建群组-"+name+"");
							var li = "<li><div class='list_bodyName'>"+name+"</div>"+
								"<div class='hide' style='display:none'>"+data+"</div></li>";
							$("#list_bodyDiv #list_bodyDiv3 ul").prepend(li);
						}
					});
				}
			}
			/**
			 * 跳转到朋友圈
			 */
			function moveToFriendCircle(){
				$("#list_headFriendCircleImgDiv").click(function (){
					window.open("${pageContext.request.contextPath}/home/mtfc.action?email=${userBean.email}");
				});
			}
			/**
			 * 打开游戏对战
			 */
			function game(){
				window.open("${pageContext.request.contextPath}/GoBang.html");
			}
		</script>
	</head>
	<body>
		<div id="userInfoDiv">
			<div id="userInfoChildDiv">
				<div id="userInfoHeadDiv">
					<div id="userInfoImgDiv"></div>
					<div id="userInfoNameDiv">${userBean.username}</div>
				</div>
				<div id="userInfoCCDiv">
					<form action="${pageContext.request.contextPath}/home/uli.action?id=${userBean.id}" id="uploadImgForm" method="post" enctype="multipart/form-data">
						<input type="file" name="imgHead" id="imgHead"/>
					</form>
					<form id="UserInfoForm" method="post">	
						<div class="userInfoFontDiv">昵称</div>
						<input type="text" name="username" id="username" maxlength="20" value="${userBean.username}"/>
						<div class="userInfoFontDiv">性别 </div>
						<div class="userInfoFontSexDiv">男</div><input type="radio" name="sex" id="sex" value="1" ${userBean.sex==1?'checked':''}/>
						<div class="userInfoFontSexDiv">女</div><input type="radio" name="sex" id="sex" value="2" ${userBean.sex==2?'checked':''}/>
						<div class="userInfoFontDiv">生日 </div>
						<input type="date" name="birthday" id="birthday" value="${userBean.birthday}"/>
						<div class="userInfoFontDiv">故乡 </div>
						<select name="gProvince" id="gProvince"></select>
						<select name="gCity" id="gCity"></select>
						<div class="userInfoFontDiv">所在地 </div>
						<select name="sProvince" id="sProvince"></select>
						<select name="sCity" id="sCity"></select>
						<div class="userInfoFontDiv">职业 </div>
						<input type="text" name="occupation" id="occupation" maxlength="11" value="${userBean.occupation}"/>
						<div class="userInfoFontDiv">学校 </div>
						<input type="text" name="school" id="school" maxlength="11" value="${userBean.school}"/>
						<div class="userInfoFontDiv">公司 </div>
						<input type="text" name="company" id="company" maxlength="15" value="${userBean.company}"/>
						<div class="userInfoFontDiv">手机 </div>
						<input type="text" name="phoneNum" id="phoneNum" maxlength="11" value="${userBean.phoneNum}"/>
					</form>
					<button id='userInfoCCDivButton'>保存</button>
				</div>
			</div>
		</div>
		<div id="searchFriendDiv">
			<div id="searchFriendChildDiv">
				<div id="searchBoxDiv">
					<form id="searchFriendForm">
						<input type="text" name="email" id="email"/>
					</form>
					<button id="searchFriendSubmit">查找</button>
				</div>
				<div id="searchResultDiv">
					<ul>
					</ul>
				</div>
			</div>
		</div>
		<div id="homeDiv">
			<div id="list_of_friendsDiv">
				<div id="list_headDiv">
					<div id="list_headImgDiv" title="查看"></div>
					<div id="list_headNameDiv" contenteditable="true" title="${userBean.username}">${userBean.username}</div>
					<div id="list_headFriendCircleImgDiv" title="朋友圈"></div>
					<div id="list_headSearchDiv">
						<input type="text" name="list_headSearchInput" id="list_headSearchInput" placeholder="搜索" />
						<button id="list_headSearchDelButton"></button>
						<div id="list_headSearchListDiv"><ul></ul></div>
					</div>
					<div id="list_headCardDiv">
						<div class="list_headCardDiv" title="聊天"></div>
						<div class="list_headCardDiv" title="朋友"></div>
						<div class="list_headCardDiv" title="群组"></div>
						<div class="list_headCardMenuDiv" id="list_headCardMenuDiv1">
							<ul>
								<li>添加</li>
								<!-- <li>新增分组</li> -->
							</ul>
						</div>
						<div class="list_headCardMenuDiv" id="list_headCardMenuDiv2">
							<ul>
								<li onclick="showGroup(this)">创建群组</li>
								<li style="height: 50px; background-color: #666; padding:0px;margin: 0px;border: 0px;display: none">
									<input id="groupNameInput" maxlength="8" type="text" placeholder="请输入群名称" style="width: 90px;height: 23px;background-color: #eee;outline: none"/>
									<div onClick="createGroup(this)" style="height:25px;width: 94px;margin: 0px; line-height: 25px;font-size: 10px;text-align: center;background-color:#777">确定</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="list_bodyDiv">
					<div class="list_bodyDiv" id="list_bodyDiv1">
						<ul>
							<!-- <li>
								<div class="list_bodyImgDiv" title="查看"></div>
								<div class="list_bodyName">好友1</div>
								<div class="list_bodyTime">5：29</div>
								<div class="list_bodyMeg">在吗？</div>
							</li>
							<li>
								<div class="list_bodyImgDiv" title="查看"></div>
								<div class="list_bodyName">好友2</div>
								<div class="list_bodyTime">5：29</div>
								<div class="list_bodyMeg">在吗？</div>
							</li> -->
						</ul>
					</div>
					<div class="list_bodyDiv" id="list_bodyDiv2">
						<ul>
							<li><div class="list_bodyImgRightDiv2"></div>默认列表1</li>
							<li>
								<ul>
									<!-- <li>
										<div class="list_bodyImgDiv" title="查看"></div>
										<div class="list_bodyName">好友1</div>
									</li>
									<li>
										<div class="list_bodyImgDiv" title="查看"></div>
										<div class="list_bodyName">好友2</div>
									</li> -->
								</ul>
							</li>
							<!--<li><div class="list_bodyImgRightDiv2"></div>默认列表2</li>
							<li>
								<ul>
									<li>
										<div class="list_bodyImgDiv" title="查看"></div>
										<div class="list_bodyName">好友3</div>
									</li>
									<li>
										<div class="list_bodyImgDiv" title="查看"></div>
										<div class="list_bodyName">好友4</div>
									</li>
								</ul>
							</li> -->
						</ul>
					</div>
					<div class="list_bodyDiv" id="list_bodyDiv3">
						<ul>
						
						</ul>
					</div>
				</div>
			</div>
			<div id="chatDiv">
				<div id="hide" style="display:none"></div>
				<div id="chatNameDiv">
					
				</div>
				<hr />
				<div id="chatBodyDiv">
					
				</div>
				<hr />
				<div id="chatInputDiv">
					<textarea style="display: none"></textarea>
					<button id="sendMesButton" style="display: none">发送</button>
				</div>
				<div id="chatGroupInputDiv" style="display: none">
					<textarea style="display: none"></textarea>
					<button id="sendGroupMesButton" style="display: none">发送</button>
				</div>
			</div>
		</div>
	</body>
</html>
